<template>
	<!--    章节练习答题页-->
	<view :class="{'yejian': if_theme_dark}">
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<view scroll-y style="height: 100%;">
			<view style="height: 10px;"></view>
			<view class="questionBankAnswer" v-if="current_timu && current_timu.id">
				<question-type :current_timu="current_timu" :timu_order="timu_order" :total_num="total_num">
				</question-type>
			</view>
			<view class="questionBankAnswer-content" v-if="current_timu && current_timu.question_name">
				<question-title :node="current_timu.question_name"></question-title>
				<block v-for="(item, index) in current_timu.answers" :key="index">
					<question-option v-if="subjectVipLevel == 1" :level="subjectVipLevel" question_type="exam"
						:ref="'questionOption_' + index" :type="type" :item="item" :index="index" :show_beiti="show_beiti"
						:current_timu="current_timu" :copy_user_answer="copy_user_answer" :timu_index="timu_order - 1"
						:copy_post_status="copy_post_status" @post_answer_req="post_answer_req"
						@set_copy_user_answer="set_copy_user_answer" @set_sub_button_style="set_sub_button_style"></question-option>

					<question-option v-else :ref="'questionOption_' + index" :type="type" :level="subjectVipLevel" :item="item"
						:index="index" :show_beiti="show_beiti" :current_timu="current_timu" :copy_user_answer="copy_user_answer"
						:timu_index="timu_order - 1" :copy_post_status="copy_post_status" @post_answer_req="post_answer_req"
						@set_copy_user_answer="set_copy_user_answer" @set_sub_button_style="set_sub_button_style"></question-option>
				</block>
				<template v-if="current_timu.type == 4">
					<question-tiankong :current_timu="current_timu" :is_tiankong_sub="is_tiankong_sub" :show_beiti="show_beiti"
						@set_current_timu="set_current_timu" @post_answer_req="post_answer_req"
						@set_sub_button_style="set_sub_button_style"></question-tiankong>
				</template>
				<template v-else-if="current_timu.type == 5">
					<question-jianda :current_timu="current_timu" :is_jianda_sub="is_jianda_sub" :show_beiti="show_beiti"
						@set_current_timu="set_current_timu" @post_answer_req="post_answer_req"
						@set_sub_button_style="set_sub_button_style"></question-jianda>
				</template>
				<question-pre-next v-if="timu_list.length > 0" :total_num="total_num" :timu_order="timu_order"
					:timu_list="timu_list" @choice_timu_by_id="choice_timu_by_id" @tap_handler="tap_handler"
					class="questionBankAnswer-contentbtnbox"></question-pre-next>
			</view>
			<block >
				<question-answer ref="questionAnswer"
					v-if="(current_timu && current_timu.answers && show_beiti || copy_post_status[current_timu.id])"
					:timu_order="timu_order" :level="is_vip==1?subjectVipLevel:2" :show_beiti="show_beiti" :current_timu="current_timu"
					:copy_post_answer_right="copy_post_answer_right" :timu_list="timu_list"></question-answer>
			</block>
			<view style="height: 80px;"></view>
		</view>
		<view class="order-pay">
			<question-fav class="questionBankAnswer-bottom-flex" :current_timu="current_timu" @collect_opt="collect_opt"
				:type="type"></question-fav>
			<question-note class="questionBankAnswer-bottom-flex" :current_timu="current_timu"></question-note>
			<question-jiucuo class="questionBankAnswer-bottom-flex" :current_timu="current_timu"></question-jiucuo>
			<question-answer-sheet class="questionBankAnswer-bottom-flex"
				@show_choice_timu_list="show_choice_timu_list = true"></question-answer-sheet>
		</view>
		<question-answer-sheet-1 typestate='true' :level="is_vip==1?subjectVipLevel:2" v-if="show_choice_timu_list"
			@show_choice_timu_list="show_choice_timu_list = false" :timu_order="timu_order" :timu_list="timu_list"
			:my_res="my_res" :total_num="total_num" @choice_timu_by_id="choice_timu_by_id"></question-answer-sheet-1>
		<question-set :show_change_moshi="show_change_moshi" :if_theme_dark="if_theme_dark" @emptyLog="emptyLog"
			:show_empty="true" @set_if_theme_dark="set_if_theme_dark" @hide_change_moshi="show_change_moshi = false">
		</question-set>

		<overtimu v-if="show_over_dati" :timuinfo="over_dati_info" @tap_handler="tap_handler"></overtimu>
		<ifcontinue v-if="show_continue_answer" :timuorder="timu_order" @tap_handler="tap_handler"></ifcontinue>
	</view>
</template>

<script>
	// 退出答题组件
	import overtimu from '@/components/overtimu/index';
	import {
		mapState
	} from 'vuex';
	import ifcontinue from "@/components/if-continue/index"
	export default {
		data() {
			return {
				is_vip: 0,
				type: '', //from_type 1：章节练习  2：历年真题
				copy_post_answer_right: {},
				//区分多选题是否点击提交按钮
				is_duoxuan_sub: false,
				is_tiankong_sub: false,
				is_jianda_sub: false,
				//是否显示继续答题弹框
				show_continue_answer: false,
				//是否显示新用户左右滑动切换题目的提示
				guide: false,
				// 答题、背题模式
				show_beiti: true,
				// 上一题
				last_timu: {},
				// 当前题目
				current_timu: {},
				// 下一题
				next_timu: {},
				total_num: 0, //全部题目数
				// 用户输入的答案
				copy_user_answer: {},
				copy_right_answer_code: {},
				copy_post_status: {},
				// 是否显示退出答题弹框
				show_over_dati: false,
				over_dati_info: {},
				// 答题开始时间
				start_time: 0,
				// 显示答题卡
				show_choice_timu_list: false,
				// 答题卡
				timu_list: [],
				// 模式
				show_change_moshi: false,
				if_theme_dark: false, // 黑夜模式
				// 上次答到第几题
				timu_order: -1,
				current_tika_index: 0,
				my_res: {
					right_num: 0,
					error_num: 0
				}
			};
		},
		components: {
			overtimu,
			ifcontinue,
		},
		computed: {
			...mapState(['subject', 'userinfo', 'subjectVip', 'subjectVipLevel']),
			static_media() {
				return {
					img01: this.$myConfig.localMedia + '/static/img/dui.png',
				}
			},
		},
		onBackPress() {
			this.over_dati();
			return true;
		},
		onLoad(opts) {
			this.id = opts.id
			this.type = opts.from_type
			if (this.userinfo.user_id !== undefined) {
				this.init();
			}
			// 答题开始时间
			this.start_time = new Date().getTime();
		},
		methods: {
			async init() {
				const info = await this.$myUserLogin.getUnitVipInfo(this.type, this.id);
				this.is_vip = info.is_vip
				if (info.is_vip == 0 || info.owned_vip == 1) {
					this.get_timu_list();
				} else {
					//需要vip但还不是vip
					uni.showToast({
						title: '暂无权限',
						icon: 'none'
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 1500)
				}
			},
			set_sub_button_style(type, value) {
				this[type] = value
			},
			set_current_timu(data) {
				this.current_timu = JSON.parse(JSON.stringify(data))
				let copy_user_answer_this = this.copy_user_answer;
				if (copy_user_answer_this[this.current_timu.id]) {
					copy_user_answer_this[this.current_timu.id] = this.current_timu.my_answer_arr
				}
			},
			set_copy_user_answer(data) {
				this.copy_user_answer = JSON.parse(JSON.stringify(data))
				this.setAnswerStyle(this.current_timu);
				this.setMyAnswer();
			},
			collect_opt(type) {
				this.$set(this.current_timu, 'is_fav', type)
			},

			// 获取答题卡
			async get_timu_list() {
				let res = await this.$myHttp.post({
					//mytodo
					url: this.$myHttp.urlMap.examCard2,
					data: {
						analysis: 1, //是否获取考试解析
						exam_id: this.id // 考试id
					},
					needLogin: true
				});
				if (res.code == 1) {
					this.timu_list = res.data.card;
					this.total_num = this.timu_list.length;
					this.timu_order = res.data.position

					this.isChangeTimu = false
					// if (res.data.curr_question != []) {
						// let timu = this.set_right_flg(res.data.curr_question);
						// this.current_timu = timu;
						// this.save_user_answer(this.current_timu);
						this.is_duoxuan_sub = false
						this.is_tiankong_sub = false
						this.is_jianda_sub = false
					// } else {
					// 	this.current_timu = null;
					// }
					// this.get_timu_order();
					this.get_my_res();
					this.choice_timu_by_id(0)
				}
			},
			get_my_res() {
				let error_num = 0,
					right_num = 0;
				for (let i = 0, leng = this.timu_list.length; i < leng; i++) {
					//if_que 答题状态：1是错2是对3是未答过此题
					if (!this.timu_list[i].state) {
						error_num++
					} else if (this.timu_list[i].state == 1) {
						right_num++
					}
				}
				this.$set(this.my_res, 'right_num', right_num)
				this.$set(this.my_res, 'error_num', error_num)
			},
			// 根据答题卡获取题目
			choice_timu_by_id(index) {
				this.timu_order = index + 1
				this.isChangeTimu = true
				this.get_timu_info()
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});
			},
			// 获取当前题目
			async get_timu_info() {
				let id = this.timu_list[this.timu_order - 1].id;
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.timu_details,
					data: {
						id: id
					},
					needLogin: true
				});
				if (res.code == 1) {
					this.isChangeTimu = false
					if (res.data != []) {
						let timu = this.set_right_flg(res.data);
						this.current_timu = timu;
						this.save_user_answer(this.current_timu);
						this.is_duoxuan_sub = false
						this.is_tiankong_sub = false
						this.is_jianda_sub = false
					} else {
						this.current_timu = null;
					}
				} else {
					this.isChangeTimu = false
				}
			},
			// 设置正确答案的标记
			set_right_flg(timu) {
				if (timu.type <= 3) {
					timu.post_status = 0;
					if (timu.answers) {
						for (let i = 0, leng = timu.answers.length; i < leng; i++) {
							if (timu.right_answer.toString().toLowerCase().replace(/\s/g, '').indexOf(timu.answers[i]
									.answer_code.toString().toLowerCase().replace(/\s/g, '')) !== -1) {
								timu.answers[i]['right_flg'] = true
							}
						}
					}
				}
				return timu
			},

			// 本地存储用户答案
			save_user_answer(timu) {
				if (timu.type <= 3) {
					if (timu && timu.answers) {
						//copy_user_answer 用户输入的答案,
						if (!(this.copy_user_answer[timu.id])) {
							//本题用户的答案
							this.copy_user_answer = Object.assign({}, this.copy_user_answer, {
								[timu.id]: []
							});
							//copy_right_answer_code 本题的正确答案
							this.copy_right_answer_code = Object.assign({}, this.copy_right_answer_code, {
								[timu.id]: timu.right_answer
							});
							//copy_post_status 本题答没答过
							this.copy_post_status = Object.assign({}, this.copy_post_status, {
								[timu.id]: false
							});
							//copy_post_answer_right  本题答的是对是错
							this.copy_post_answer_right = Object.assign({}, this.copy_post_answer_right, {
								[timu.id]: false
							});

							for (let i = 0, leng = timu.answers.length; i < leng; i++) {
								this.copy_user_answer[timu.id].push({
									answer_code: timu.answers[i].answer_code,
									error_flg: false,
									active: false
								})
							}
							if (timu.my_answer !== '' && timu.my_answer !== null) {
								this.setUserAnswer(timu)
							} else {
								this.setAnswerStyle(timu);
							}
						} else {
							this.setAnswerStyle(timu);
						}
					}
				} else {
					let right_answer_arr = timu.right_answer.split('|');
					this.$set(timu, 'right_answer_arr', right_answer_arr)
					this.$set(timu, 'show_right_answer', false)
					if (!(this.copy_user_answer[timu.id]) || this.copy_user_answer[timu.id].length == 0) {
						//本地没有记录呢，如果my_answer有值，写进去
						this.copy_user_answer = Object.assign({}, this.copy_user_answer, {
							[timu.id]: []
						});
						this.copy_post_status = Object.assign({}, this.copy_post_status, {
							[timu.id]: false
						});
						if (timu.my_answer == '' || timu.my_answer == null) {
							//之前没有答过题
							let arr = [];
							arr.length = right_answer_arr.length;
							this.$set(timu, 'my_answer_arr', arr)
							this.$set(timu, 'my_answer', '')
							this.setAnswerStyle(timu);
						} else {
							//之前答过题了
							this.setUserAnswer(timu)
						}
					} else {
						//之前答过题了
						this.setUserAnswer(timu)
					}
				}
			},
			//获取题目信息后，如果答过题了，设置到本地
			setUserAnswer(timu) {
				//timu.my_answer !== '' && timu.my_answer !== null  说明这道题已经回答过了
				this.copy_post_status = Object.assign({}, this.copy_post_status, {
					[timu.id]: true
				});
				// 如果是判断和单选。执行以下处理
				if (timu.type == 1 || timu.type == 3) {
					let index = timu.answers.findIndex(item => item.answer_code == timu.my_answer)
					// this.$nextTick(() => {
					if (this.copy_user_answer[timu.id]) {
						for (let i = 0, leng = this.copy_user_answer[timu.id].length; i <
							leng; i++) {
							this.copy_user_answer[timu.id].splice(i, 1, {
								...this.copy_user_answer[timu.id][i],
								active: false,
								error_flg: false
							})
						}
						if (timu.right_answer.toString().toLowerCase().replace(/\s/g, '').indexOf(
								timu.my_answer.toString().toLowerCase().replace(/\s/g, '')) === -1) {
							this.copy_user_answer[timu.id].splice(index, 1, {
								...this.copy_user_answer[timu.id][index],
								active: true,
								error_flg: true
							})
						} else {
							this.copy_user_answer[timu.id].splice(index, 1, {
								...this.copy_user_answer[timu.id][index],
								active: true,
								error_flg: false
							})
						}
					}
					// });
				} else if (timu.type == 2) {
					// 如果是多选。执行以下处理
					if (this.copy_user_answer[timu.id]) {
						if (this.is_duoxuan_sub = true) {
							this.is_duoxuan_sub = false
						}
						for (let key of timu.my_answer) {
							let index = timu.answers.findIndex(item => item.answer_code == key)
							if (this.copy_user_answer[timu.id][index]) {
								if (this.copy_user_answer[timu.id][index].active) {
									if (timu.right_answer.toString().toLowerCase().replace(/\s/g, '').indexOf(key
											.toString().toLowerCase().replace(/\s/g, '')) === -1) {
										this.copy_user_answer[timu.id].splice(index, 1, {
											...this.copy_user_answer[timu.id][index],
											active: false,
											error_flg: true
										})
									} else {
										this.copy_user_answer[timu.id].splice(index, 1, {
											...this.copy_user_answer[timu.id][index],
											active: false,
											error_flg: false
										})
									}
								} else {
									if (timu.right_answer.toString().toLowerCase().replace(/\s/g, '').indexOf(key
											.toString().toLowerCase().replace(/\s/g, '')) === -1) {
										this.copy_user_answer[timu.id].splice(index, 1, {
											...this.copy_user_answer[timu.id][index],
											active: true,
											error_flg: true
										})
									} else {
										this.copy_user_answer[timu.id].splice(index, 1, {
											...this.copy_user_answer[timu.id][index],
											active: true,
											error_flg: false
										})
									}
								}
							}
						}
					}
				} else {
					// 如果是填空，简答
					this.$set(timu, 'my_answer_arr', timu.my_answer.split('|'))
					this.$set(timu, 'my_answer', timu.my_answer)
					this.$set(timu, 'show_right_answer', true)
					this.copy_user_answer = Object.assign({}, this.copy_user_answer, {
						[timu.id]: []
					});
					this.copy_user_answer[timu.id].push(...timu.my_answer_arr)
				}
				this.setAnswerStyle(timu);
			},
			//单选多选判断，选项正确错误
			setAnswerStyle(timu) {
				this.$nextTick(() => {
					timu.answers.forEach((item, index) => {
						this.$refs['questionOption_' + index][0].setAnswerStyle(this.copy_user_answer);
					})
					this.setMyAnswer();
				})
			},
			setMyAnswer() {
				if (this.show_beiti || this.copy_post_status[this.current_timu.id]) {
					// this.$nextTick(() => {
					if (this.$refs.questionAnswer) {
						this.$refs.questionAnswer.my_answer(this.copy_user_answer)
					}
					// })
				}
			},
			//设置夜间模式
			set_if_theme_dark(data) {
				this.if_theme_dark = data
			},
			async emptyTestLog() {
				let data = {}
				data = {
					exam_id: this.id ,// 考试id
					analysis: 1, //是否获取考试解析
				}
				let res = await this.$myHttp.post({
					//mytodo
					url: this.$myHttp.urlMap.examCard2,
					data: data, 
					needLogin: true
				});
				if (res.code == 1) {
					this.get_timu_list();
					this.show_change_moshi = false;
					this.copy_user_answer = {}
				}
			},
			tap_handler(type) {
				if (type == 0) {
					this.show_over_dati = false;
				} else if (type == 1) {
					this.$redirectTo(
						'/pages/questionBank/questionOver/index?id=' +
						this.id +
						'&from_type=' +
						this.type +
						'&end_time=' +
						this.endtime() +
						'&right_num=' +
						this.my_res.right_num +
						'&start_time=' +
						this.start_time +
						'&zhengquelv=' +
						100 * (this.my_res.right_num / ((this.my_res.right_num + this.my_res.error_num == 0) ? 1 : (
							this.my_res.right_num + this.my_res.error_num))).toFixed(2) +
						'&total_num=' +
						(this.my_res.right_num + this.my_res.error_num) || 0
					)
				} else if (type == 3) {
					this.show_continue_answer = false;
					this.choice_timu_by_id({
						id: this.timu_order
					})
				} else if (type == 4) {
					this.show_continue_answer = false;
					this.get_timu_info();
				}
			},
			show_beiti_click(type) {
				this.show_beiti = type;
				this.setAnswerStyle(this.current_timu);
			},

			endtime() {
				let yy = new Date().getFullYear();
				let mm = new Date().getMonth() < 10 ? "0" + (new Date().getMonth() + 1) : new Date().getMonth() + 1;
				let dd = new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate();
				let hh = new Date().getHours();
				let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
				let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
				return yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
			}
		}
	};
</script>

<style>
	@import "~@/static/css/tiku.css";
</style>